<template>
	<form @submit="formSubmit">
		<view class="personal-data">
			<view class="list">
				<view class="item acea-row row-between-wrapper">
					<view>头像</view>
					<view class="pictrue">
						<image :src="userInfo.avatarUrl"></image>
					</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view>名字</view>
					<view class="input"><input type="text" disabled="true" name="nickname" :value="userInfo.nickName"></view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view>手机号码</view>
					<button name="phone" class="phone" :value="userInfo.phone" v-if="!userInfo.phone" @getphonenumber="getPhoneNumber" hover-class="none" open-type="getPhoneNumber">
						点击获取
					</button>
					<view class="input acea-row row-between-wrapper" v-else>
						<input type="text" disabled="true" name="phone" :value="userInfo.phone" class="id">
						<text class="iconfont icon-suozi"></text>
					</view>
				</view>

				<view class="item acea-row row-between-wrapper">
					<view>代理申请</view>
					<view class="input acea-row row-between-wrapper" v-if="userInfo.userLevel==2">
						<input type="text" disabled="true" :value="userInfo.userLevelDesc" class="id">
						<text class="iconfont icon-huangguan"></text>
					</view>
					<view class="input acea-row row-between-wrapper" v-else-if="userInfo.status == 3">
						<input type="text" disabled="true" value="代理申请中，请耐心等待管理员审批..." class="id">
						<text class="iconfont icon-huangguan"></text>
					</view>
					<button name="phone" class="phone" v-else hover-class="none" @tap="applyAgency">
						点击申请
					</button>
				</view>

				<view class="item acea-row row-between-wrapper">
					<view>ID号</view>
					<view class="input acea-row row-between-wrapper">
						<input type="text" :value="'1000' + userInfo.userId" disabled="true" class="id">
						<text class="iconfont icon-suozi"></text>
					</view>
				</view>

				<view class="item acea-row row-between-wrapper">
					<view>微信openId</view>
					<view class="input acea-row row-between-wrapper" style="width:510rpx">
						<input style="width:431rpx" type="text" :value="userInfo.weixinOpenid" disabled="true" class="id">
						<button class="fuzhi" @tap="copyOpenId" :data-text="userInfo.weixinOpenid">复制</button>
					</view>
				</view>

			</view>
			<view v-if="userSharedUrl && userSharedUrl!=''" style="text-align:center;background-color:#fff;">
				<view>代理专属推广二维码（长按保存到相册）</view>
				<image class="img" :src="userSharedUrl" @longpress="saveShare" style="width:600rpx;height:600rpx;"></image>
			</view>
			<button class="modifyBnt" @tap="exitLogin">退 出</button>
		</view>
	</form>
</template>

<script>
const util = require("../../../utils/util.js");
const api = require("../../../config/api.js");
const user = require("../../../utils/user.js");
const app = getApp();

export default {
	data()
	{
		return {
			userInfo: {},
			hasLogin: false,
			userSharedUrl: ''
		};
	},

	components: {},
	props: {},

	/**
			* 生命周期函数--监听页面加载
	 */
	onLoad: function (options) { },
	onShow: function ()
	{
		let that = this; //获取用户的登录信息

		let userInfo = uni.getStorageSync('userInfo');
		this.setData({
			userInfo: userInfo,
			hasLogin: true
		}); //如果无分享推广码,则需要获取分享二维码

		if (this.hasLogin && this.userSharedUrl == '')
		{
			that.getUserSharedUrl();
		}
	},
	methods: {
		getUserSharedUrl: function ()
		{
			let that = this;
			util.request(api.GetSharedUrl).then(function (res)
			{
				that.setData({
					userSharedUrl: res.data.userSharedUrl
				});
			});
		},
		applyAgency: function ()
		{
			let that = this;

			if (!this.hasLogin)
			{
				uni.showToast({
					title: '绑定失败：请先登录',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			if (!this.userInfo.phone || this.userInfo.phone.length == 0)
			{
				uni.showToast({
					title: '绑定失败：请先绑定手机号',
					icon: 'none',
					duration: 3000
				});
				return;
			}

			util.request(api.ApplyAgency, {
				desc: "代理申请"
			}, 'POST').then(function (res)
			{
				if (res.errno === 0)
				{
					let userInfo = uni.getStorageSync('userInfo');
					userInfo.status = 3; //设置用户的状态为申请代理中...

					uni.setStorageSync('userInfo', userInfo);
					that.setData({
						userInfo: userInfo,
						hasLogin: true
					});
					uni.showToast({
						title: '申请成功，等待管理员审批',
						icon: 'success',
						duration: 2000
					});
				}
			});
		},
		getPhoneNumber: function (e)
		{
			let that = this;

			if (e.detail.errMsg !== "getPhoneNumber:ok")
			{
				// 拒绝授权
				return;
			}

			if (!this.hasLogin)
			{
				uni.showToast({
					title: '绑定失败：请先登录',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			util.request(api.AuthBindPhone, {
				iv: e.detail.iv,
				encryptedData: e.detail.encryptedData
			}, 'POST').then(function (res)
			{
				if (res.errno === 0)
				{
					let userInfo = uni.getStorageSync('userInfo');
					userInfo.phone = res.data.phone; //设置手机号码

					uni.setStorageSync('userInfo', userInfo);
					that.setData({
						userInfo: userInfo,
						hasLogin: true
					});
					uni.showToast({
						title: '绑定手机号码成功',
						icon: 'success',
						duration: 2000
					});
				}
			});
		},
		// 保存推广码到相册
		saveShare: function ()
		{
			let that = this;
			uni.downloadFile({
				url: that.userSharedUrl,
				success: function (res)
				{
					console.log(res);
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: function (res)
						{
							uni.showModal({
								title: '推广码下载',
								content: '推广二维码成功保存到相册!!',
								showCancel: false,
								confirmText: '好的',
								confirmColor: '#a78845',
								success: function (res)
								{
									if (res.confirm)
									{
										console.log('用户点击确定');
									}
								}
							});
						},
						fail: function (res)
						{
							console.log('fail');
						}
					});
				},
				fail: function ()
				{
					console.log('fail');
				}
			});
		},
		exitLogin: function ()
		{
			uni.showModal({
				title: '',
				confirmColor: '#b4282d',
				content: '退出登录？',
				success: function (res)
				{
					if (!res.confirm)
					{
						return;
					}

					util.request(api.AuthLogout, {}, 'POST');
					app.globalData.hasLogin = false;
					uni.removeStorageSync('token');
					uni.removeStorageSync('userInfo');
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}
			});
		},
		copyOpenId: function (e)
		{
			const copyData = e.currentTarget.dataset.text;
			uni.setClipboardData({
				data: copyData,
				success: function (res)
				{//do something
				}
			});
		},

		formSubmit()
		{
			console.log("占位：函数 formSubmit 未声明");
		}

	}
};
</script>
<style>
.personal-data .list {
	margin-top: 15rpx;
	background-color: #fff;
}
.personal-data .list .item {
	padding: 30rpx 30rpx 30rpx 0;
	border-bottom: 1rpx solid #f2f2f2;
	margin-left: 30rpx;
	font-size: 32rpx;
	color: #282828;
}
.personal-data .list .item .phone {
	background-color: #ff654b;
	width: 160rpx;
	height: 56rpx;
	font-size: 24rpx;
	color: #fff;
	line-height: 56rpx;
	border-radius: 32rpx;
}
.personal-data .list .item .pictrue {
	width: 88rpx;
	height: 88rpx;
}
.personal-data .list .item .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.personal-data .list .item .input {
	width: 415rpx;
	text-align: right;
	color: #868686;
}
.personal-data .list .item .input .id {
	width: 365rpx;
}
.personal-data .list .item .input .iconfont {
	font-size: 35rpx;
}
.personal-data .modifyBnt {
	background-color: #ff654b;
	font-size: 32rpx;
	color: #fff;
	width: 690rpx;
	height: 90rpx;
	border-radius: 50rpx;
	text-align: center;
	line-height: 90rpx;
	margin: 76rpx auto 0 auto;
}
.fuzhi {
	font-size: 13px;
	background-color: #ff654b;
	width: 80rpx;
	height: 35rpx;
	color: #fff;
	line-height: 35rpx;
	border-radius: 20rpx;
}
</style>